<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css水平垂直居中方案</title>
  </head>
  <style type="text/css">
    /* 
    第一种：flex;jusitfy-content:center;align-items:center;
    tips：兼容差
   */
    /*  .parent {
      height: 600px;
      width: 100%;
      background-color: #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .son {
      height: 100px;
      width: 100px;
      background-color: red;
    } */

    /* 
    第二种:position:absolute,transform
    tips：兼容性稍差，兼容IE10以上
     */
    /* .parent {
      height: 600px;
      width: 100%;
      background-color: #ccc;
      position: relative;
    }

    .son {
      height: 100px;
      width: 100px;
      background-color: red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
    } */
    /* 
    第三种：inline-block + table-cell + text-align + vertical-align
    3.1 line-height: 600px;
    3.2 vertical-align: middle;
    */
    .parent {
      height: 600px;
      width: 100%;
      background-color: #ccc;
      text-align: center;
      display: table-cell;
      vertical-align: middle;
    }

    .son {
      height: 100px;
      width: 100px;
      background-color: red;
      display: inline-block;
    }
  </style>

  <body>
    <div class='parent'>
      <div class='son'></div>
    </div>
  </body>

</html>